<template>
    <Modal
            class-name="vertical-center-modal"
            v-model="modal"
            :title="title">
        <div>
            <slot name='header'></slot>
            <Form ref="formValidate" :model="info" :rules='infoVal' :label-width="80" action="javascript:void(0)">
                <slot name='form_header'></slot>
                <FormItem :label="label" prop='content'>
                    <c-input v-model="info.content" type="textarea" :autosize="{minRows: 3,maxRows: 5}" :maxlength="pWordCount" :limit="limit" placeholder="请输入详情"></c-input>
                </FormItem>
            </Form>
            <slot></slot>
        </div>
        <div slot="footer">
            <button class="btn btn-danger" type="button" @click='cancel'>取消</Button>
            <btn-submit class="btn btn-success" type="submit" :p-click="ok('formValidate')">确定</btn-submit>
        </div>
    </Modal>
</template>
<script>
    const setDataDef = {
        content:''
    };
    export default{
        name: 'TextareaAlert',
        props:{
            pTitle:String,
            pLabel:String,
            pSubmit:Function,
            pWordCount:Number,
        },
        data () {
            return {
                modal:false,
                info:{},
                infoVal: {
                    content: [
                        { required: true, message: this.label?this.label+'不能为空':'不能为空', trigger: 'blur' }
                    ],
                }
            }
        },
        computed:{
            title(){
                return this.pTitle||'设置'
            },
            label(){
                return this.pLabel||'详情'
            },
            limit(){
                return this.pWordCount&&this.pWordCount>0
            },
        },
        methods: {
            handleOpen(data){
                this.info = Object.assign({},data,setDataDef);
                this.$set(this,'modal',true);
            },
            cancel () {
                this.$emit('on-cancel');
                this.$set(this,'modal',false);
            },
            ok (name) {
                return async ()=>{
                    const  valid = await this.$refs[name].validate();
                    if (valid) {
                        if(this.pSubmit){
                            const res = await this.pSubmit(this.info);
                            if(res){this.$set(this,'modal',false);}
                            return res;
                        }else {
                           return false
                        }
                    } else {
                        this.$Message.error('表单验证失败!');
                        return false;
                    }
                }
            },

        },
        components:{
        }
    }
</script>